<template>
  <el-main :style="{height: this.mainHeight + 'px'}">
    <el-row :gutter="10">
      <el-col :span="this.span">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-link :underline="false">总销售额</el-link>
            <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
              <i class="el-icon-star-off" style="float: right; padding: 3px 0"></i>
            </el-tooltip>
            <h1>{{'￥' + dataForm.totalSales}}</h1>
            <div class="text item">
              {{'周同比' + dataForm.weekRatio + '%' &emsp; + ' 日同比' + dataForm.dayRatio + '%'}}
            </div>
          </div>
          <div class="text item">
            {{'日均销售额￥' + dataForm.averageSales}}
          </div>
        </el-card>
      </el-col>

      <el-col :span="this.span">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-link :underline="false">月销售额</el-link>
            <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
              <i class="el-icon-star-off" style="float: right; padding: 3px 0"/>
            </el-tooltip>
            <h1>{{'￥' + dataForm.monthlySales}}</h1>
            <div class="text item">
              {{'周同比' + dataForm.weekRatio + '%' &emsp; + ' 日同比' + dataForm.dayRatio + '%'}}
            </div>
          </div>
          <div class="text item">
            {{'日均销售额￥' + dataForm.averageSales}}
          </div>
        </el-card>
      </el-col>

      <el-col :span="this.span">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-link :underline="false">日销售额</el-link>
            <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
              <i class="el-icon-star-off" style="float: right; padding: 3px 0"></i>
            </el-tooltip>
            <h1>{{'￥' + dataForm.dailySales}}</h1>
            <div class="text item">
              {{'周同比' + dataForm.weekRatio + '%' &emsp; + ' 日同比' + dataForm.dayRatio + '%'}}
            </div>
          </div>
          <div class="text item">
            {{'日均销售额￥' + dataForm.averageSales}}
          </div>
        </el-card>
      </el-col>

      <el-col :span="this.span">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-link :underline="false">总会员数</el-link>
            <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
              <i class="el-icon-star-off" style="float: right; padding: 3px 0"></i>
            </el-tooltip>
            <h1>{{'' + dataForm.totalMembers}}</h1>
            <div class="text item">
              {{'周同比' + dataForm.divideOfWeek + '%' &emsp; + ' 日同比' + dataForm.divideOfDay + '%'}}
            </div>
          </div>
          <div class="text item">
            {{'日均注册会员数：' + dataForm.averageMember}}
          </div>
        </el-card>
      </el-col>
    </el-row>

    <br/> <br/>
    <el-row>
      <el-menu
        :default-active="this.index"
        mode="horizontal" text-color="black"
        @select="handleSelect">
        <el-menu-item index="0">销售额</el-menu-item>
        <el-menu-item index="1">注册会员</el-menu-item>
        <div style="float: right">
          <!--          &emsp;<el-link type="primary">今日</el-link>-->
          <!--          &emsp;<el-link type="primary">本周</el-link>-->
          <!--          &emsp;<el-link type="primary">本月</el-link>-->
          <!--          &emsp;<el-link type="primary">本年</el-link>-->
          &emsp;<el-date-picker
          type="daterange"
          v-model="dates"
          @change="changeDateHandle"
          value-format="yyyy-MM-dd"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        </div>
      </el-menu>
      <div v-if="this.index==='0'">
        <ve-histogram :data="histogramData" :legend-visible="false" height="500px"></ve-histogram>
      </div>
      <div v-else>
        <ve-line :data="lineData" :settings="lineSettings" :legend-visible="false" height="500px"></ve-line>
      </div>
    </el-row>
  </el-main>

</template>

<script>
  import VeHistogram from 'v-charts/lib/histogram.common'
  import VeLine from 'v-charts/lib/line.common'

  export default {
    data: function () {
      return {
        dates: ['2019-02-02', '2019-01-01'],
        span: 6,
        index: '0',
        mainHeight: '',
        socket: null,
        dataForm: {
          totalSales: '',
          monthlySales: '',
          dailySales: '',
          totalMembers: '',
          weekRatio: '',
          dayRatio: '',
          averageSales: '',
          divideOfWeek: '',
          divideOfDay: '',
          averageMember: '',
          dailySalesList: [],
          dailyMemberList: []
        },
        style: {
          height: this.mainHeight
        },
        histogramData: {
          columns: ['日期', '销售额'],
          rows: []
        },
        lineSettings: {
          area: true
        },
        lineData: {
          columns: ['日期', '注册会员'],
          rows: []
        }
      }
    },
    mounted () {
      this.getDataList()
      this.mainHeight = this.getMainHeight()
    },
    computed: {
      userId: {
        get () {
          return this.$store.state.user.id
        },
        set (val) {
          this.$store.commit('user/updateId', val)
        }
      }
    },
    components: {
      VeHistogram,
      VeLine
    },
    methods: {
      handleSelect (key, keyPath) {
        this.index = key
      },
      getMainHeight () {
        return document.getElementsByClassName('el-card__body')[0].clientHeight + 500
      },
      getDataList () {
        this.$http({
          url: this.$http.adornUrl(`/tra/home/list`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.totalSales = data.homeVO.totalSales
            this.dataForm.monthlySales = data.homeVO.monthlySales
            this.dataForm.dailySales = data.homeVO.dailySales
            this.dataForm.totalMembers = data.homeVO.totalMembers
            this.dataForm.weekRatio = data.homeVO.weekRatio
            this.dataForm.dayRatio = data.homeVO.dayRatio
            this.dataForm.averageSales = data.homeVO.averageSales
            this.dataForm.divideOfWeek = data.homeVO.divideOfWeek
            this.dataForm.divideOfDay = data.homeVO.divideOfDay
            this.dataForm.averageMember = data.homeVO.averageMember
            this.dates = data.homeVO.period
            this.dataProcessing(data.homeVO.dailySalesList, data.homeVO.dailyMemberList)
            this.histogramData.rows = this.dataForm.dailySalesList
            console.log(this.histogramData.rows)
            this.lineData.rows = this.dataForm.dailyMemberList
          }
        })
      },
      changeDateHandle () {
        this.$http({
          url: this.$http.adornUrl('/tra/home/chart'),
          method: 'get',
          params: this.$http.adornParams({
            'startDate': this.dates[0],
            'endDate': this.dates[1]
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataProcessing(data.chartVO.dailySalesList, data.chartVO.dailyMemberList)
            this.histogramData.rows = this.dataForm.dailySalesList
            this.lineData.rows = this.dataForm.dailyMemberList
          }
          this.dataListLoading = false
        })
      },
      dataProcessing (dailySalesList, dailyMemberList) {
        this.dataForm.dailySalesList = []
        this.dataForm.dailyMemberList = []
        for (let item of dailySalesList) {
          this.dataForm.dailySalesList
            .push({'日期': item.date.substr(5, 5), '销售额': item.dailySales})
        }
        for (let item of dailyMemberList) {
          this.dataForm.dailyMemberList
            .push({'日期': item.createTime.substr(5, 5), '注册会员': item.dailyMembers})
        }
      }
    }
  }
</script>

<style>
  ::-webkit-scrollbar {
    width: 0
  }

  /*  .el-main {
      padding: 0;
    }*/
  /* .el-row {
     width: 1600px;
   }
   body-style {
     padding: 0;
   }
   element.style {
     padding-left: 0;
     padding-right: 0;
   }*/
</style>

